<template>
  <div>
    <ul class="sg-chart">
      <div
        v-for="(item, index) in list"
        :key="index"
        style="display: inline-block"
      >
        <li class="sg-chart-col">
          <el-popover
            placement="bottom"
            :title="item.name"
            width="200"
            trigger="hover"
            :close-delay="50"
          >
            <p>描述：{{ item.description }}</p>
            <p>状态：{{ dataFormat("stateid", item.stateid) }}</p>
            <p>实际开始：{{ item.acstartdate }}</p>
            <p>实际结束：{{ item.acfinishdate }}</p>
            <p>进度：{{ item.percent ? item.percent : 0 }}%</p>
            <div
              slot="reference"
              @click="OpenTab(item)"
              style="text-align:center;padding:10px 20px"
            >
          <el-progress type="circle" :percentage="item.percent" :width="80" :stroke-width="15"></el-progress>
          <div class="stageName" :style="'color:'+getstyle(item)">{{ item.name }}</div>
          <div class="stageTime">{{item.esstartdate + '-' + item.esfinishdate}}</div>
            </div>
          </el-popover>
        </li>
        <template v-if="item.gate.length > 0">
          <div
            v-for="(gate, index) in item.gate"
            :key="index"
            style="display: inline-block"
          >
            <li class="sg-chart-col small">
              <el-popover
                placement="bottom"
                :title="gate.name"
                width="200"
                trigger="hover"
                :close-delay="50"
              >
                <div class="gate_menu">
                  <span class="gate_menu_item" @click="handleClick('meeting', gate)"><i class="el-icon-s-comment"></i>会议</span>
                  <span class="gate_menu_item" @click="handleClick('decision', gate)"><i class="el-icon-s-opportunity"></i>决策</span>
                  <span class="gate_menu_item" @click="handleClick('deliver', gate)"><i class="el-icon-s-claim"></i>交付物</span>
                  <span class="gate_menu_item" @click="handleClick('audit', gate)"><i class="el-icon-s-check"></i>审批</span>
                </div>
                <div class="img" slot="reference">
                  <img src="@/assets/image/ico_gate.png" alt="gate" class="gate"/>
                  <img src="@/assets/image/ico_gate_hover.png" alt="gate_hover"  class="gate_hover"/>
                  <div class="gateName">GATE</div>
                </div>
              </el-popover>
            </li>
          </div>
        </template>
      </div>
    </ul>
    <el-row>
      <el-tabs type="card" v-model="stageVal" @tab-remove="RemoveTab">
        <el-tab-pane
          :key="key"
          v-for="(val, key) in stageLists"
          :label="val[0].name"
          :name="String(key)"
          closable
        >
          <h3 style="text-indent: 20px">{{ val[0].name }}任务一览表</h3>
          <dynamic-table
            :list="val"
            :columns="table_cols"
            :options="options"
            :operates="operates"
            :diff="600"
          ></dynamic-table>
        </el-tab-pane>
        <el-tab-pane label="项目里程碑">
          <h3 style="text-indent: 20px">项目里程碑一览表</h3>
          <dynamic-table
            :list="milestoneList"
            :columns="table_cols"
            :options="options"
            :operates="operates"
            :diff="600"
          ></dynamic-table>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import { getDataList, getConfigInfo } from "@/api/dynamic/dynamic";
import dynamicTable from "@/views/components/dynamicTable";

export default {
  name: "stageGate",
  components: {
    dynamicTable,
  },
  props: {
    geturl: "",
    table: "",
  },
  data() {
    return {
      queryMenuParams: {},
      allData: [],
      columns: [],
      table_cols: [],
      list: [],
      milestoneList: [],
      stageLists: {},
      stageVal: "0",
      options: {
        // table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
      },
      operates: {
        // 列操作按钮
        width: 150,
        list: [],
      },
    };
  },
  created() {
    this.getTableCols();
    this.getList();
  },
  methods: {
    getTableCols() {
      getConfigInfo({ table: this.table }).then((response) => {
        this.table_cols = response.data.tableData;
      });
    },
    getList() {
      getDataList(this.geturl).then((response) => {
        this.list = response.data.list;
        this.milestoneList = response.data.milestoneList;
        this.SortList(this.list);
        this.SortList(this.milestoneList);
      });
      getDataList("/pmswbs/list?projectid=" + this.$route.params.Id).then(
        (response) => {
          this.allData = response.rows;
          this.SortList(this.allData);
        }
      );
    },
    SortList(val) {
      val.sort(function (list1, list2) {
        let list1_rank = list1.rank ? list1.rank.trim().split(".") : [0];
        let list2_rank = list2.rank ? list2.rank.trim().split(".") : [0];
        for (let i = 0; ; i++) {
          if (list1_rank[i] == undefined && list2_rank[i] == undefined) {
            return true;
          }
          list1_rank[i] =
            list1_rank[i] == undefined ? 0 : Number(list1_rank[i]);
          list2_rank[i] =
            list2_rank[i] == undefined ? 0 : Number(list2_rank[i]);
          if (list1_rank[i] - list2_rank[i] != 0) {
            return list1_rank[i] - list2_rank[i];
          }
        }
      });
    },
    getstyle(row) {
      let state = this.dataFormat("stateid", row.stateid);
      if (state == "创建") {
        return "#6CA5FF"; //未开始
      } else if (state == "完成") {
        if (
          row.acfinishdate &&
          new Date(row.acfinishdate).valueOf() <
            new Date(row.esfinishdate).valueOf()
        ) {
          return "#2ED36F"; //按时完成
        } else {
          return "#C873FC"; //延期完成
        }
      } else {
        if (new Date().valueOf() > new Date(row.esfinishdate).valueOf()) {
          return "#FF3E3E"; //延期未完成
        } else {
          return "#FFC633"; //进行中
        }
      }
    },
    OpenTab(stage) {
      if (!this.stageLists[stage.id]) {
        this.stageLists = {};
        this.stageLists[stage.id] = this.allData.filter((item) => {
          if (item.id == stage.id || item.parentid == stage.id) {
            return item;
          }
        });
      }
      this.stageVal = String(stage.id);
    },
    RemoveTab(tabName) {
      this.stageLists = {};
      this.stageVal = "0";
    },
    handleClick(type, gate) {
      let pageParams;
      if (type == "meeting") {
        pageParams = { portal: [10001000] };
      } else if (type == "decision") {
        pageParams = { portal: [10001001] };
      } else if (type == "deliver") {
        pageParams = { portal: [10000972] };
      } else if (type == "audit") {
        pageParams = { portal: [147] };
      }
      this.$router.push({
        path: "/portal/" + gate.id,
        query: { pageParams: pageParams, rowParams: { ...gate } },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.sg-chart {
  overflow-x: auto;
  height: 220px;
  box-sizing: border-box;
  border-bottom: 2px solid #e1e1e1;
  box-shadow: 0 1px 8px #e1e1e1;
  white-space: nowrap;
  // background: url(../../assets/image/arrow.png) repeat-x;
  // background-size: 10% 80%;
}
.sg-chart-col {
  display: inline-block;
  padding: 5px;
  width: auto;
  height: 100%;
  box-sizing: border-box;
  min-width: 200px;
  vertical-align: top;
  background: url(../../assets/image/arrow.png) no-repeat;
  background-size: 50% 80%;
  background-position:120%;
}
.small {
  width: 80px;
  height: 100px;
  min-width: 80px;
}
.stageName{
  font-size: 18px;
  font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  padding: 10px 0
}
.stageTime{
  color: #333;
}
.gateName{
  text-align: center;
  color: rgba(34,51,84,0.25);
  font-family: Chakra Petch-Medium, Chakra Petch;
  font-weight: 500;
  padding: 5px 0;
}
.img {
  padding: 20% 0;
  .gate_hover{
    display: none;
  }
  &:hover{
    border-radius: 8px;
    background: #2469EB;
    color: #fff;
    .gate_hover{
      display: block;
    }
    .gate{
      display: none;
    }
    .gateName{
      color: #fff;
    }
  }
}
.img img {
  width: 80%;
  margin: 0 10%;
}
.gate_menu{
  font-size: 16px;
  color: #333;
  .gate_menu_item{
    display: block;
    width: 100px;
    float: left;
    text-align: left;
    cursor: pointer;
    &:hover{
      background: #EDF5FE;
    }
  }
}
</style>
